<div class="mb-3">
  <label
    class="control-label"
    ng-if="$ctrl.isShowTitle"
    ng-bind="$ctrl.title"
  ></label>
  <div ng-switch="$ctrl.data.dataType.toLowerCase()">
    <div ng-switch-default>
      <!--custom-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="text"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="datetime">
      <!--datetime-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="datetime-local"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="date">
      <!--date-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="date"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="time">
      <!--time-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="time"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="phonenumber">
      <!--phonenumber-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="tel"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="integer|double|currency">
      <!-- Number -->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="number"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
      <label
        class="control-label"
        ng-bind="$ctrl.data.value | currency:''"
      ></label>
    </div>
    <div ng-switch-when="html">
      <!--Html-->
      <trumbowyg options="{}" ng-model="$ctrl.data.value"></trumbowyg>
    </div>
    <div ng-switch-when="multilinetext">
      <!--TextArea-->
      <textarea
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        rows="5"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      ></textarea>
    </div>
    <div ng-switch-when="emailadress">
      <!--Email-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="email"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="password">
      <!--Password-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="password"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="url">
      <!--Url-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="url"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="upload">
      <!--upload-->
      <custom-image
        header="''"
        type="'Module Data'"
        folder="'Module Data'"
        src-url="$ctrl.data.value"
        src="$ctrl.data.value"
        auto="'true'"
      >
      </custom-image>
    </div>
    <div ng-switch-when="color">
      <!--Color-->
      <input
        class="form-control form-control-sm {{$ctrl.inputClass}}"
        type="color"
        ng-model="$ctrl.data.value"
        placeholder="{{$ctrl.title}}"
      />
    </div>
    <div ng-switch-when="boolean">
      <!--Boolean-->
      <input
        class="{{$ctrl.inputClass}}"
        type="checkbox"
        placeholder="{{$ctrl.title}}"
        ng-model="$ctrl.data.value"
        ng-checked="$ctrl.data.value=='true'"
      />
    </div>
    <div ng-switch-when="icon">
      <mix-select-icons
        prefix="'fab'"
        options="$ctrl.icons"
        data="$ctrl.data.value"
      ></mix-select-icons>
    </div>
    <div ng-switch-when="videoyoutube">
      <youtube-editor code="$ctrl.data.value"></youtube-editor>
    </div>
  </div>
</div>
